@extends("admin.layout.main")

@section("content")
    <div id="app">

        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                <span>
                    &nbsp&nbsp&nbsp开始时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultStartTime"
                                  placeholder="选择开始日期" style="width: 200px"
                    @on-change="dateStartFormat">
                    </date-picker>
                </span>
                <span>
                    &nbsp&nbsp&nbsp结束时间:
                     <date-picker type="datetime"
                                  format="yyyy-MM-dd HH:mm:ss"
                                  :value="defaultEndTime"
                                  placeholder="选择结束时间" style="width: 200px"
                    @on-change="dateEndFormat">
                    </date-picker>
                </span>

                <span>
                    统计类型:
                     <i-select style="width: 200px" v-model="count_type">
                         <i-option value="1">已发货退款率</i-option>
                         <i-option value="2">所有订单退款率</i-option>
                     </i-select>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="orderList">查询</i-button>
                </span>

            </i-col>

        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="selection" :data="tableData" :columns="tableColumns" stripe
                         style="width: 100% !important;">
                </i-table>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    count_type:'1',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '厂家',
                            key:'manu_name'
                        },
                        {
                            title: '退款金额',
                            key: 'total_refund_amount',
                            sortable:true
                        },
                        {
                            title:'总金额',
                            key:'total_amount',
                            sortable:true
                        },
                        {
                            title: '成交额退货率（%）',
                            key:'refund_amount_rate',
                            sortable:true,
                            render: (h, params) => {
                                let refund_amount_rate =   params.row.refund_amount_rate;
                                refund_amount_rate = refund_amount_rate+'%';
                                return h('Tag', {
                                    props: {
                                        color: 'error',
                                        type:"border"
                                    }
                                }, refund_amount_rate);
                            }
                        },
                        {
                            title: '退款订单数',
                            key:'total_refund_num',
                            sortable:true
                        },
                        {
                            title: '总订单数',
                            key:'total_num',
                            sortable:true
                        },
                        {
                            title: '订单数退货率（%）',
                            key:'refund_num_rate',
                            sortable:true,
                            render: (h, params) => {
                                let refund_num_rate =   params.row.refund_num_rate;
                                refund_num_rate = refund_num_rate+'%';
                                return h('Tag', {
                                    props: {
                                        color: 'error',
                                        type:"border"
                                    }
                                }, refund_num_rate);
                            }
                        }

                    ],
                    defaultStartTime:'',
                    defaultEndTime:'',
                    spinShow:false,
                }
            },
            mounted(){
                this.orderList();
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                searchList(){   //搜索
                    this.orderList();
                },
                dateStartFormat(f,v){
                    this.defaultStartTime = f;
                },
                dateEndFormat(f,v){
                    this.defaultEndTime = f;
                },
                orderList() {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/api/order/refund",{
                        params: {
                            start_time: that.defaultStartTime,
                            end_time: that.defaultEndTime,
                            count_type:that.count_type,
                        }
                    })
                    .then(function (response) {
                        vm.tableData = response.data.result;
                        that.spinShow = false;
                    });
                },

            },

        });

    </script>

@endsection

